<template>
    <div class="client">
        <div class="tab-nav">
            <ul class="tab-ul">
                <router-link class="nav-item" tag="li" exact to="/myClient">邀请大师</router-link>
                <router-link class="nav-item" tag="li" exact to="/myClient/clientUser">邀请用户</router-link>        
            </ul>
        </div>
        <router-view/>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {Selector} from "vux";
    Vue.component('selector', Selector)
    export default {
        name: 'client',
        data() {
            return {
                offset: 0,
			    limit: 2,
                clientList: []
            }
        },
        methods: {
            operator_next(done) {
                let params = {
                    userId: this.$store.state.userId,
                    offset: this.offset,
			        limit: this.limit,
                }
                this.$http.fetchGet('operator_next', params).then(res => {
                    if(res.code == 200) {
                        // this.clientList = res.data
                        if(this.offset == 0) this.topics = res.data;
                        else this.clientList.push(...res.data);
				        done && done(!res.data.length);
				        if(res.data.length == 0) this.offset -= this.limit;
                    } else {
                        this.$vux.toast.text('无更多数据')
                    }
                }, err => {

                })
            },
            todetails(uId, uType) {
                this.$router.push({
                    path: '/clientDetails',
                    query: {
                        uId: uId,
                        uType: uType
                    }
                })
            },
            refresh(done) {
                this.offset = 0;
                this.operator_next(done);
            },
            infinite(done) {
                this.offset += this.limit;
                this.operator_next(done);
            },
        },
        created() {
            this.operator_next()
        }
    }
</script>

<style lang="less" scoped>
    .client {
        width: 100%;
        height: 100%;
        background: #f2f2f2;
        .tab-nav {
            .pt(14);
            .pb(14);
            display: flex;
            justify-content: center;
            border-bottom: 1px solid @bdColor;
            .tab-ul{
            display: flex;
            border: 2px solid @primary;
            border-radius: 0.133333rem;
            overflow: hidden;
            }
            .nav-item {
            height: .8rem;
            line-height: .8rem;
            text-align: center;
            color: @primary;
            background: #fff;
            font-size: 0.346667rem;
            padding-left: 1em;
            padding-right: 1em;
            &.router-link-exact-active {
                color: #fff;
                background: @primary;
            }
            }
        }
    }
</style>
